<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const ipt = ref('')

// route用来获取路由信息的
// const route= useRoute

// router 是用来跳转的
const router = useRouter()

const toSearch = () => {
  if (ipt.value == '') {
    return alert('内容不能为空')
  }

  // 通过 name 属性进行路由跳转
  // name 适用于，path 很长的情况
  router.push({
    name: 'sp',
    // params 传递参数
    // key 需要和注册路由的时 :xxx 中的xxx一致
    params: {
      //
      key: ipt.value
      // keyword: ipt.value
    }
  })

  // 编程式：通过 js 代码实现跳转
  // 可以写一些逻辑，相比于 router-link 更加的灵活
  // router.push('/search/' + ipt.value)
  // router.push({
  //   path: '/search/' + ipt.value
  //   // query 自动帮我们拼接到 url 中：？key=value&key2=values
  //   // query: {
  //   //   key: ipt.value
  //   // }
  // })
}
</script>

<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input v-model="ipt" type="text" />
      <button @click="toSearch">搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <!-- 查询参数 ?key=value -->
      <!-- <router-link to="/search?key=黑马程序员">黑马程序员</router-link>
      <router-link to="/search?key=前端培训">前端培训</router-link>
      <router-link to="/search?key=如何成为前端大牛">如何成为前端大牛</router-link> -->
      <router-link to="/search/黑马程序员">黑马程序员</router-link>
      <router-link to="/search/前端培训">前端培训</router-link>
      <router-link to="/search/如何成为前端大牛">如何成为前端大牛</router-link>
    </div>
  </div>
</template>

<style scoped>
.logo-box {
  height: 150px;
  background: url('@/assets/logo.jpeg') no-repeat center;
}

.search-box {
  display: flex;
  justify-content: center;
}

.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}

.search-box input:focus {
  border: 2px solid #ad2a26;
}

.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}

.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}

.hot-link a {
  margin: 0 5px;
}
</style>
